export default function () {
  return {
    props: ["data"],
    data() {
      return {
        fieldOptions: [],
        fieldMapOptions: {},

        // 图表图例
        legendOrientOptions: [
          { label: '横向', value: 'horizontal' },
          { label: '竖向', value: 'vertical' }
        ],
        legendPositionOptions: [
          { label: '左上角', value: 'topLeft' },
          { label: '右上角', value: 'topRight' },
          { label: '左下角', value: 'bottomLeft' },
          { label: '右下角', value: 'bottomRight' },
          { label: '顶部居中', value: 'topCenter' },
          { label: '底部居中', value: 'bottomCenter' },
        ],
        
        labelPositionOptions: [
          { label: '外侧', value: 'outside' },
          { label: '内部', value: 'inside' },
          { label: '中心', value: 'center' }
        ],
        labelPositionOptions2: [
          { label: '上边', value: 'top' },
          { label: '左边', value: 'left' },
          { label: '右边', value: 'right' },
          { label: '下边', value: 'bottom' },
          { label: '内部', value: 'inside' },
          { label: '内部左边', value: 'insideLeft' },
          { label: '内部右边', value: 'insideRight' },
          { label: '内部上边', value: 'insideTop' },
          { label: '内部下边', value: 'insideBottom' },
          { label: '内部左上', value: 'insideTopLeft' },
          { label: '内部左下', value: 'insideBottomLeft' },
          { label: '内部右上', value: 'insideTopRight' },
          { label: '内部右下', value: 'insideBottomRight' }
        ],
        labelFontWeightOptions: [
          { label: '正常', value: 'normal' },
          { label: '加粗', value: 'bold' },
          { label: '更粗', value: 'bolder' },
          { label: '细', value: 'lighter' }
        ],

        labelFormatterTypeOptions: [
          { label: '文本', value: 'label' },
          { label: '脚本', value: 'fn' },
        ],

        iconOptions: [
          { label: '圆形', value: 'circle' },
          { label: '矩形', value: 'rect' },
          { label: '圆角矩形', value: 'roundRect' },
          { label: '三角形', value: 'triangle' },
          { label: '菱形', value: 'diamond' },
          { label: '水滴', value: 'pin' },
          { label: '箭头', value: 'arrow' },
          { label: '无', value: 'none' },
        ],
        yNameLocationOptions: [
          { label: '开头', value: 'start' },
          { label: '中间', value: 'middle' },
          { label: '末尾', value: 'end' },
        ],
        axisTypeOptions: [
          { label: '数值', value: 'value' },
          { label: '类目', value: 'category' },
          { label: '时间', value: 'time' },
          //{ label: '对数', value: 'log' },
        ],
        toolTipTriggerOptions: [
          { label: '数据项图形触发', value: 'item' },
          { label: '坐标轴触发', value: 'axis' },
          { label: '无', value: 'none' },
        ],
        toolTipTypeOptions: [
          { label: '直线', value: 'line' },
          { label: '阴影', value: 'shadow' },
          { label: '十字准星', value: 'cross' },
        ],

        jsCodeType: '',
        jsCodeFromVisible: false,
        jsCode: '',
        jsTempCode: '',
        jsTempCodes: {
          labelFormatter: `
params.componentType: 'series',
// 系列类型
params.seriesType: string,
// 系列在传入的 option.series 中的 index
params.seriesIndex: number,
// 系列名称
params.seriesName: string,
// 数据名，类目名
params.name: string,
// 数据在传入的 data 数组中的 index
params.dataIndex: number,
// 传入的原始数据项
params.data: Object,
// 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
params.value: number|Array|Object,
// 坐标轴 encode 映射信息，
// key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
// value 必然为数组，不会为 null/undefied，表示 dimension index 。
// 其内容如：
// {
//     x: [2] // dimension index 为 2 的数据映射到 x 轴
//     y: [0] // dimension index 为 0 的数据映射到 y 轴
// }
params.encode: Object,
// 维度名列表
params.dimensionNames: Array<String>,
// 数据的维度 index，如 0 或 1 或 2 ...
// 仅在雷达图中使用。
params.dimensionIndex: number,
// 数据图形的颜色
params.color: string,
// 百分比
params.percent: number
          `
        }
      };
    },
    computed: {
      config() {
        return this.data.config;
      },
      echarts() {
        return this.config.echarts;
      },
      series() {
        return this.echarts.series;
      },
      label() {
        return this.series.label
      },
      legend() {
        return this.echarts.legend
      }
    },
    methods: {
      // 初始化
      commonInit(data, config) {
        config.title = data.label
        this.$set(data, 'config', config)
        this.$set(data, '_isInit', true)
      },

      // 数据视图选择
      handleDataSourceChange(data, item) {
        this.clearKeys && this.clearKeys(item);
        this.handleDataSourceInit(data);
      },
      handleDataSourceInit(data) {
        if (data) {
          const sql = data.f_Sql;
          const { columns } = JSON.parse(sql);
          this.fieldOptions = columns.map((t) => ({
            value: t.prop,
            label: this.getColNames(t),
          }));
          this.fieldMapOptions[data.f_Code] = this.fieldOptions
        } else {
          this.fieldOptions = [];
        }
      },
      getColNames({ prop, label }) {
        let name = prop;
        if (prop != label) {
          name = `${prop}(${label})`;
        }
        return name;
      },

      // 颜色配置
      handleAddColor() {
        const { color } = this.echarts;
        color.push({ v: "" });
      },
      handleRemoveColor() {
        const { color } = this.echarts;
        color.splice(color.length - 1, 1);
      },

      // 脚本添加
      handleAddCode(type) {
        this.jsCodeType = type
        this.jsCodeFromVisible = true
      },
      handleOpenedCodeForm() {
        this.jsCode = this.config[this.jsCodeType] || ''
        this.jsTempCode = this.jsTempCodes[this.jsCodeType] || ''
      },
      handleCodeSave() {
        this.$set(this.config,this.jsCodeType,this.jsCode)
        this.jsCodeFromVisible = false
        this.jsCode = ''
        this.jsTempCode = ''
      }
    }
  }
}